<template>
	<!-- 图片box -->
	<view class="goods-img" :class="{ 'is-drawer-status': isDrawerStatus }" @mousedown="mousedown"
		@dblclick="onDbClickHandler">
		<minMaxClose ref="minMaxClose"></minMaxClose>
		<view class="images">
			<image :src="avatar ? avatar : userDefault" mode="scaleToFill"></image>
			<view class="customers">
				<view class="c-a">
					{{ isShowName ? name ? name : " 散客" : "" }}
					<text class="c-a-pl" v-if="isShowCp">{{ company ? company : "" }}</text>
				</view>
				<view class="c-b">{{ cellphone ? cellphone : "" }}</view>
			</view>
			<!-- <el-button style="margin-left: 20px;" size="mini" type="primary">智能分析</el-button> -->
		</view>
		<view class="info-more">
			<view class="more-icon" @click="onInfoMore">
				<image src="../../static/images/c-more.png"></image>
			</view>
		</view>
		<el-dialog title="智能分析" :visible.sync="intelligentShow" width="600px">
			<div class="intelligent-box">
				<div class="intelligent-item">
					<div>
						<span class="intelligent-title">消费次数</span>
						<span>215.0</span>
					</div>
					<i class="icon-font icon-style">&#xe600;</i>
				</div>
				<div class="intelligent-item intelligent-border">
					<div>
						<span class="intelligent-title">消费金额</span>
						<span>215.0</span>
					</div>
					<i class="icon-font icon-style">&#xe600;</i>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
import cmd from "../../js/Cmd.js";
import lang from "../../js/conf/Lang.js";
import minMaxClose from "../min-max-close.vue";
import staticConst from "../../js/const/StaticConst.js";
import windBtnContrl from "../../js/WinBtnContrl.js";
import config from "@/js/conf/Config.js";

export default {
	props: {
		avatar: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		},
		cellphone: {
			type: String,
			default: ''
		},
		company: {
			type: String,
			default: ''
		},
		isShowCp: {
			type: Boolean,
			default: false
		},
		isShowName: {
			type: Boolean,
			default: true
		},
		isDrawerStatus: {
			type: Boolean,
			default: false
		}
	},
	components: { minMaxClose },
	data() {
		return {
			userDefault: staticConst.DEFAULT_IMG,
			intelligentShow: false,
		};
	},
	methods: {

		onInfoMore() {
			this.$emit("showCustmInfo");
		},

		onDbClickHandler() {
			this.$refs.minMaxClose.changeMax();
		},

		/***移动窗口***/
		mousedown() {
			windBtnContrl.mousedown();
		},
	}
}
</script>

<style lang="scss" scoped>
// 产品图片-box
.goods-img {
	width: 100%;
	height: 110px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #EEE;

	.images {
		display: flex;
		align-items: center;
		padding: 20px;
		position: relative;

		image {
			margin-right: 10px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;
		}

		.customers {
			.c-a {
				font-size: 16px;
				color: #333;

				.c-a-pl {
					padding-left: 10px;
				}
			}

			.c-b {
				color: #999;
			}
		}
	}

	.info-more {
		padding-right: 20px;
		display: flex;

		.more-icon {
			width: 24px;
			height: 24px;
			cursor: pointer;
			padding: 0 10px;

			image {
				width: 100%;
				height: 100%;
			}

		}
	}
}

.is-drawer-status {
	cursor: pointer;
	height: 72px !important;
}

.intelligent-box {
	.intelligent-item {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f7f4f4;
		cursor: pointer;

		.intelligent-title {
			margin-right: 20px;
		}
	}

	.intelligent-border {
		border-bottom: 3px solid #f7f4f4;
	}
}
</style>
